import { useLocation, useNavigate } from 'react-router-dom'
import './index.css'
function TabBer() {
    const location = useLocation()
    const navigate = useNavigate()
    const { pathname } = location
    const arr = [
        {
            path: "/home",
            title: "首页"
        },
        {
            path: "/class",
            title: "分类"
        },
        {
            path: "/shop",
            title: "购物车"
        },
        {
            path: "/My",
            title: "我的"
        },
    ]
    const handleClick = (item) => {
        navigate(item.path)
    }
    return (
        <div className='footer'>
            {arr.map(item => {
                return (
                    <div keys={pathname}
                        onClick={() => handleClick(item)} key={item.path} className=''>
                        {item.title}</div>
                )
            })}
        </div>
    )
}
export default TabBer